<template>
  <!--用户添加&修改-->
  <div class="search">
    <f-form ref="form" :action="api.menu" :form-key="this.formItem.menuId">
      <f-form-item label="上级菜单" type="other" v-show="formItem.parentId!=0">
        <a-tree-select
          style="width: 300px;"
          :dropdownStyle="{ maxHeight: '500px', overflow: 'auto' }"
          placeholder='请选择父级菜单'
          v-model="formItem.parentId"
          :treeData="treeData"
        />
      </f-form-item>
      <f-form-item label="菜单名称" name="menuName" :required="true" :value="formItem.menuName"/>
      <f-form-item label="菜单编码" name="menuCode" :required="true" :value="formItem.menuCode"/>
      <f-form-item label="布局页面" name="menuLayout" type="select" :data="api.common.menuLayout" :required="true" :value="formItem.menuLayout"/>
      <f-form-item label="页面地址" name="path" :value="formItem.path"/>
      <f-form-item label="图标" name="icon" :required="true" :value="formItem.icon">
        <a-icon slot="addonBefore" :type="formItem.icon"/>
        <a-popover slot="addonAfter" placement="bottomRight">
          <a-icon type="search"/>
          <div slot="content">
            <icon-select style="width: 660px" v-model="formItem.icon" @change="handleIconChange"></icon-select>
          </div>
        </a-popover>
      </f-form-item>
      <f-form-item label="页面顶部" name="hiddenHeaderContent" type="radio" v-if="loaded" :data="api.common.displayState" :value="formItem.hiddenHeaderContent"/>
      <f-form-item label="优先级" type="number" dataType="number" name="priority" :required="true" :value="formItem.priority"/>
      <f-form-item label="描述" name="menuDesc" type="textarea" :value="formItem.menuDesc"/>
    </f-form>
  </div>
</template>

<script>
  import IconSelect from '../../../../components/IconSelector/IconSelector'
  import { listToTree2 } from '@/utils/util'

  export default {
    name: 'menusForm',
    props: {},
    data() {
      return {
        isAdd: true,
        loaded:false,
        treeData: [],
        formItem: this.getFormItem()
      }
    },
    methods: {
      handleIconChange(icon) {
        this.formItem.icon = icon
      },
      getFormItem() {
        return {
          priority: 0,
          icon: 'bars',
          scheme: '/',
          hiddenHeaderContent: true

        }
      },
      loadData() {
        this.http.get(this, {
          url: this.api.menu.list,
          data: {
            params: {}
          },
          success: function(me, data) {
            let obj = listToTree2(data, {
              primaryKey: 'menuId',
              titleKey: 'menuName'
            })
            me.treeData = obj

          }
        })
      },
      setData(data) {
        this.$refs.form.resetFields()
        this.formItem = this.getFormItem()
        this.isAdd = true
        if (data && data.menuId) {
          this.formItem = data
          this.isAdd = false
        }
        me.loaded=true
      },
      handleSubmit(callback) {
        this.$refs.form.submit({ parentId: this.formItem.parentId }, callback)
      }
    },
    created() {
      this.loadData()
    },
    components: { IconSelect }
  }
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
